<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Menus &amp; toolbars in Tk</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, menu, toolbar, Tcl/Tk, programming, Tcl, Linux, learn Tcl/Tk">
<meta name="description" content="This part of the Tcl/Tk tutorial covers Menus &amp; toolbars.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div> 

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus &amp; toolbars</h1>

<p>
In this part of the Tcl/Tk tutorial, we will 
work with menus and a toolbar. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
A menubar is one of the most visible parts of the GUI application. 
It is a group of commands located in various menus. While in console 
applications you had to remember all those arcane commands, here we have 
most of the commands grouped into logical parts. There are accepted standards
that further reduce the amount of time spending to learn a new application.
Menus group commands that we can use in an application. 
Toolbars provide a quick access to the most frequently used commands.
</p>


<h2>Simple menu</h2>

<p>
The first example will show a simple menu. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this code example, we create 
# a simple menu.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


menu .mbar
. configure -menu .mbar

menu .mbar.fl -tearoff 0
.mbar add cascade -menu .mbar.fl -label File \
    -underline 0

.mbar.fl add command -label Exit -command { exit }

wm title . "Simple menu" 
wm geometry . 250x150+300+300
</pre>

<p>
Our example will show a File menu with one item. By selecting the 
exit menu item we close the application. 
</p>

<pre class="explanation">
menu .mbar
. configure -menu .mbar
</pre>

<p>
We create a menubar. A menubar is a special case of a menu. 
</p>


<pre class="explanation">
menu .mbar.fl -tearoff 0
</pre>

<p>
File menu is created. The -tearoff option specifies that the
menu cannot be removed from the menubar. 
</p>

<pre class="explanation">
.mbar add cascade -menu .mbar.fl -label File \
    -underline 0
</pre>

<p>
We add the file menu to the menubar. The -underline option underlines the
first character of the label. Now the menu can be pulled down with the
Alt + F shortcut.
</p>

<pre class="explanation">
.mbar.fl add command -label Exit -command { exit }
</pre>

<p>
An Exit command is added to the File menu. This will create a menu item.
When the menu item is selected, the application terminates. 
</p>


<img src="/img/gui/tcltk/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>


<h2>Submenu</h2>

<p>
A submenu is a menu plugged into another menu object. 
The next example demonstrates this. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this code example, we create 
# a submenu.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


menu .mbar
. configure -menu .mbar

menu .mbar.fm -tearoff 0
.mbar add cascade -menu .mbar.fm -label File \
    -underline 0
       
menu .mbar.fm.sb   
.mbar.fm.sb add command -label "News feed"
.mbar.fm.sb add command -label Bookmarks
.mbar.fm.sb add command -label Mail

.mbar.fm add cascade -label Import -menu \
    .mbar.fm.sb -underline 0
.mbar.fm add separator
        
.mbar.fm add command -label Exit -underline 0 \
    -command {exit}     


wm title . submenu 
wm geometry . 250x150+300+300  
</pre>

<p>
In the example, we have three options in a submenu of a file menu. We create 
a separator and keyboard shortcuts.
</p>


<pre class="explanation">
menu .mbar.fm.sb   
.mbar.fm.sb add command -label "News feed"
.mbar.fm.sb add command -label Bookmarks
.mbar.fm.sb add command -label Mail
</pre>

<p>
We have a submenu with three commands. The submenu is a regular menu.
Note the hierarchy of the widget path name. 
</p>

<pre class="explanation">
.mbar.fm add cascade -label Import -menu \
    .mbar.fm.sb -underline 0
</pre>

<p>
By adding the menu to the File menu and not to the menubar, we create
a submenu. The underline parameter creates a keyboard shortcut. We provide
a character position, which should be underlined. In our case it is the
first. Positions start from zero. When we click on the File menu, a popup
window is shown. The Import menu has one character underlined. We can 
select it either with the mouse pointer, or with the Alt + I shortcut.  
</p>

<pre class="explanation">
.mbar.fm add separator
</pre>

<p>
A separator is a horizontal line that visually separates the menu commands. 
This way we can group items into some logical places.
</p>

<img src="/img/gui/tcltk/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>


<h2>Popup menu</h2>

<p>
In the next example, we create a popup menu. Popup menu is also
called a context menu. It can be shown anywhere on the client area
of a window. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this code example, we create 
# a popup menu.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


menu .m -tearoff 0
.m add command -label Beep
.m add command -label Exit -command {exit}

bind . "&lt;Button-3&gt;" "showMenu %X %Y"

wm title . popupmenu
wm geometry . 250x150+300+300

proc showMenu {x y} {
    tk_popup .m $x $y
} 
</pre>

<p>
In our example, we create a popup menu with two 
commands. 
</p>

<pre class="explanation">
menu .m -tearoff 0
.m add command -label Beep
.m add command -label Exit -command {exit}
</pre>

<p>
A context menu is a regular <code>menu</code> widget. The
<code>tearoff</code> feature is turned off. 
</p>

<pre class="explanation">
bind . "&lt;Button-3&gt;" "showMenu %X %Y"
</pre>

<p>
We bind the &lt;Button-3&gt; event to the showMenu procedure.
The event is generated when we right click on the client area
of the window. We pass two parameters to the procedure. These
are the x, y coordinates of the mouse click.
</p>


<pre class="explanation">
proc showMenu {x y} {
    tk_popup .m $x $y
} 
</pre>

<p>
The showMenu procedure shows the context menu. The popup menu
is shown at the x, y coordinates of the mouse click. To display
the popup menu, we use the <code>tk_popup</code> command. 
</p>


<img src="/img/gui/tcltk/popupmenu.png" alt="Popup menu`">
<div class="figure">Figure: Popup menu</div>



<h2>Toolbar</h2>

<p>
Menus group commands that we can use in an application. Toolbars provide 
a quick access to the most frequently used commands. There is no toolbar
widget in Tk. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this code example, we create 
# a toolbar.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com

package require Img

menu .mbar
. configure -menu .mbar

menu .mbar.fl -tearoff 0
.mbar add cascade -menu .mbar.fl -label File \
    -underline 0
        
frame .toolbar -bd 1 -relief raised
image create photo img -file "exit.png"
button .toolbar.exitButton -image img -relief flat -command {exit}
pack .toolbar.exitButton -side left -padx 2 -pady 2
pack .toolbar -fill x

wm title . toolbar
wm geometry . 250x150+300+300
</pre>

<p>
Our toolbar will be a frame on which we will put a button.
</p>

<pre class="explanation">
frame .toolbar -bd 1 -relief raised
</pre>

<p>
A toolbar is created. It is a <code>frame</code>. We created a raised border,
so that the boundaries of a toolbar are visible. 
</p>

<pre class="explanation">
image create photo img -file "exit.png"
button .toolbar.exitButton -image img -relief flat -command {exit}
</pre>

<p>
An exit button with an image is created.
</p>


<pre class="explanation">
pack .toolbar.exitButton -side left -padx 2 -pady 2
</pre>

<p>
The toolbar is a frame and a frame is a container widget.
We pack the button to the left side. We add some padding. 
</p>

<pre class="explanation">
pack .toolbar -fill x
</pre>

<p>
The toolbar is packed to the root window.
It is horizontally stretched. 
</p>

<img src="/img/gui/tcltk/toolbar.png" alt="Toolbar">
<div class="figure">Figure: Toolbar</div>

<p>
In this part of the Tcl/Tk tutorial, we have shown how to create a menubar 
with menus and menu items and a toolbar.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 11, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

